<template>
  <div class="collector">
    <div class="user-box">
      <div class="user-item" v-for="(item, index) in subscribers" :key="index">
        <div class="item_left">
          <img v-lazy="item.avatarUrl" alt="">
        </div>
        <div class="item_right">
          <div class="nickname">
            <span>{{item.nickname}}</span>
            <img v-if="item.gender === 2" src="~@/assets/img/songlistdetail/female.svg" alt="">
            <img v-else-if="item.gender === 1" src="~@/assets/img/songlistdetail/male.svg" alt="">
          </div>
          <div class="signature">{{item.signature}}</div>
        </div>
      </div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="15"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
 import {home} from "@/network/home";

 export default {
   name: "SonglistDetailCollector",
   data(){
     return {
       subscribers:[], //收藏者
       total:0,       //收藏数
       currentPage:0, //当前页
     }
   },
   created() {
     this.getSonglistCollector(this.$route.params.id)
   },
   watch:{
     '$route.path'(){
       this.getSonglistCollector(this.$route.params.id);
     },
   },
   methods:{
     // 获取歌单收藏者的函数
     getSonglistCollector(id, offset){
      home.getSonglistCollector(id, offset).then(res => {
        this.subscribers = res.data.subscribers
        this.total = res.data.total
        //avatarUrl:头像 nickname:名字  signature:签名 gender:1为男 2为女
      })
     },
     //点击分页切换页数
     handleCurrentChange(newPage){
       this.currentPage = newPage - 1
       this.getSonglistCollector(this.$route.params.id,this.currentPage * 15)
     }
   },
 }
</script>

<style scoped>

.user-box{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding-bottom: 50px;
}
.user-item{
  padding: 10px;
  margin: 5px 0;
  width: 350px;
  height: 150px;
  display: flex;
}
.item_left{
  width: 130px;
}
.item_left img{
  width: 100%;
  border-radius: 50%;
}
.item_right{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 27px;
}
.item_right img{
  width: 20px;
  height: 20px;
  position: relative;
  top: 2px;
}
.item_right .nickname{
  font-size: 14px;
  color: #6f6969;
}
.item_right .signature{
  width: 210px;
  padding-left: 5px;
  font-size: 13px;
  color: #a9a9bb;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}

</style>
